<template>
    <view class="diy-service">
        <!-- 拨打电话 -->
        <button class="phonekf" @click="onMakePhoneCall">
            <view class="service-title">客服热线</view>
            <view class="service-icon">
                <text class="iconfont icon-tonghua font-color"></text><text class='phone'>{{ merPhone || '' }}</text>
            </view>
        </button>
        <!-- 调试信息（可选，上线前删除） -->
        <view v-if="productData" class="product-info-debug">
            <view class="debug-title">当前商品信息：</view>
            <view class="debug-item">商品ID: {{ productData.productId }}</view>
            <view class="debug-item">商品名称: {{ productData.productName }}</view>
            <view class="debug-item">商品价格: ¥{{ productData.productPrice }}</view>
            <image v-if="productData.productImage" :src="productData.productImage" class="debug-img"></image>
        </view>
        
        <!-- 在线客服 -->
        <view class="hr">在线客服</view>
        <view class="online-service-list">
            <view class="onlinekf">
                <button open-type="contact" @click="openkefu1">
					      <!-- <image :src="servicePic"></image> -->
                    <view>
                        <text class="iconfont icon-weixin1 font-color"></text>
                        <text>商品客服</text>
                    </view>
                </button>
                <button open-type="contact" @click="openkefu2">
                  <!-- <image :src="servicePic"></image> -->
                    <view>
                        <text class="iconfont icon-weixin1 font-color"></text>
                        <text>宝贝密码专属客服</text>
                    </view>
                </button>
                <button open-type="contact" @click="openkefu3">
                  <!-- <image :src="servicePic"></image> -->
                    <view>
                        <text class="iconfont icon-weixin1 font-color"></text>
                        <text>选品客服</text>
                    </view>
                </button>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        itemStyle: Object,
        params: Object
    },
    data() {
        return {
            merPhone: '4009918217',
            productData: null, // 商品信息
        }
    },
    onLoad(options) {
        // 接收商品信息参数
        if (options.productData) {
            try {
                this.productData = JSON.parse(decodeURIComponent(options.productData));
                console.log('接收到的商品信息:', this.productData);
            } catch (e) {
                console.error('解析商品信息失败:', e);
            }
        }
    },
    created() {
    },
    methods: {
        /**
         * 点击拨打电话
         */
        onMakePhoneCall(e) {
            uni.makePhoneCall({
                phoneNumber: this.merPhone
            })
        },
		openkefu1(){
			const params = {
				extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc4f891601db90417d'},
				corpId: 'wwdd448fdbcf8cf54c',
				success: (res) => {
					console.log('客服会话打开成功', res);
				},
				fail: (err) => {
					console.error('客服会话打开失败', err);
				}
			};
			
			// 如果有商品信息，添加到客服消息中
			if (this.productData) {
				// 构建商品详情页路径
				const productPath = `/pages/goods/goods_details/index?id=${this.productData.productId}&mt=${this.productData.marketingType || 0}`;
				params.showMessageCard = true;
        params.sendMessagePath = productPath;
				// 如果有商品图片，也可以传递
				if (this.productData.productImage) {
					params.sendMessageImg = this.productData.productImage;
				}
				params.sendMessageTitle = this.productData.productName || '商品咨询';
			}
			
			wx.openCustomerServiceChat(params);
		},
		openkefu2(){
			const params = {
				extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc10dff6302890693b'},
				corpId: 'wwdd448fdbcf8cf54c',
				success: (res) => {
					console.log('客服会话打开成功', res);
				},
				fail: (err) => {
					console.error('客服会话打开失败', err);
				}
			};
			
			// 如果有商品信息，添加到客服消息中
			if (this.productData) {
				// 构建商品详情页路径
				const productPath = `/pages/goods/goods_details/index?id=${this.productData.productId}&mt=${this.productData.marketingType || 0}`;
				params.showMessageCard = true;
        params.sendMessagePath = productPath;
				// 如果有商品图片，也可以传递
				if (this.productData.productImage) {
					params.sendMessageImg = this.productData.productImage;
				}
				params.sendMessageTitle = this.productData.productName || '商品咨询';
			}
			
			wx.openCustomerServiceChat(params);
		},
    openkefu3(){
			const params = {
				extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc087ce05a8e1c6c75'},
				corpId: 'wwdd448fdbcf8cf54c',
				success: (res) => {
					console.log('客服会话打开成功', res);
				},
				fail: (err) => {
					console.error('客服会话打开失败', err);
				}
			};
			
			// 如果有商品信息，添加到客服消息中
			if (this.productData) {
				// 构建商品详情页路径
				const productPath = `/pages/goods/goods_details/index?id=${this.productData.productId}&mt=${this.productData.marketingType || 0}`;
				params.showMessageCard = true;
        params.sendMessagePath = productPath;
				// 如果有商品图片，也可以传递
				if (this.productData.productImage) {
					params.sendMessageImg = this.productData.productImage;
				}
				params.sendMessageTitle = this.productData.productName || '商品咨询';
			}
			
			wx.openCustomerServiceChat(params);
		}
    }
}
</script>

<style lang="scss" scoped>
page,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    background-image: url(../../static/images/callCenter.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}

.diy-service {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40rpx;

    .iconfont {
        font-size: 50rpx !important;
    }

    .phonekf {
        margin: 200rpx auto 100rpx;
        background-color: rgba(187, 189, 253, 0.9);
        border-radius: 20rpx;
        padding: 30rpx 40rpx;
        box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
        width: 80%;
        transition: all 0.3s ease;

        &:active {
            transform: scale(0.98);
            box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
        }

        .service-title {
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
            color: #333;
        }

        .service-icon {
            display: flex;
            align-items: center;
            justify-content: center;

            .font-color {
                color: #4a5af8;
                font-size: 36rpx;
                margin-right: 10rpx;
            }

            .phone {
                font-size: 32rpx;
                color: #333;
            }
        }
    }

    .product-info-debug {
        background-color: rgba(255, 255, 255, 0.95);
        border-radius: 16rpx;
        padding: 24rpx;
        margin: 20rpx 0;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
        width: 90%;

        .debug-title {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 16rpx;
        }

        .debug-item {
            font-size: 26rpx;
            color: #666;
            margin-bottom: 8rpx;
            line-height: 1.6;
        }

        .debug-img {
            width: 200rpx;
            height: 200rpx;
            border-radius: 8rpx;
            margin-top: 16rpx;
            display: block;
        }
    }

    .hr {
        font-weight: bold;
        font-size: 36rpx;
        margin-bottom: 30rpx;
        position: relative;
        padding-bottom: 16rpx;
        color: #333;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60rpx;
            height: 6rpx;
            background-color: #4a5af8;
            border-radius: 3rpx;
        }
    }

    .online-service-list {
        width: 90%;
    }

    .onlinekf {
        margin: 30rpx 0;

        button {
            background-color: rgba(117, 191, 76, 0.9);
            border-radius: 16rpx;
            padding: 24rpx;
			margin-bottom: 24rpx;
            box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            width: 100%;

            &:active {
                transform: scale(0.98);
                box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.08);
            }

            view {
                display: flex;
                align-items: center;
                justify-content: center;

                .font-color {
                    color: #fff;
                    font-size: 40rpx;
                    margin-right: 16rpx;
                }

                text:last-child {
                    font-size: 30rpx;
                    color: #fff;
                }
            }
        }
    }
}
</style>
